<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Curves</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body style='background:-webkit-gradient(linear,0 0, 0 100%, color-stop(0,black), color-stop(0.8, rgb(150,150,150)), color-stop(1, rgb(200,200,200)))'>
    <div id="Main" style="width:600px;height:400px;"></div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    var w = window.innerWidth - 16;
    var h = window.innerHeight - 16;
    var pi = Math.PI;
    var main = document.getElementById('Main');



    main.style.width = w + 'px';
    main.style.height = h + 'px';

    require(['zrender','zrender/shape/rose','zrender/shape/trochoid'], function(zrender, RoseShape, TrocholdShape){
            var zr = zrender.init( main );

            var N = 10;
            var color = require('zrender/tool/color');
            var colorId = 0;

            for (var i = 0; i < N ; i ++) {
                createShape(i);
            }  
            zr.render();

            function createShape(i) {
                var id = require('zrender/tool/guid')();
                var ShapeClass = ( i % 5 == 0 ) ? TrocholdShape : RoseShape;
                var r = ( i % 5 == 0 ) ? random(50, 20) : [random(100, 30)];
                
                var shape = new ShapeClass({
                    id : id,
                    position : [random(w), random(h)],
                    style : {
                        x : 0,
                        y : 0,
                        r : r,
                        r0 : random(20, 10),
                        d : random(100),
                        k : random(10),
                        n : random(5),
                        location : ['in', 'out'][i % 2],
                        lineWidth : 1,
                        strokeColor :  color.getColor(colorId ++)
                    },
                    rotation : [pi * 2 / random(360), 0, 0],
                    hoverable : false,
                    draggable : false
                });
                zr.addShape(shape);
                animate(id, shape.type);
            }

            function animate(id, shape) {
                var time = random(1000, 100);
                var type = shape =='rose' ? random(6) : random(3);
                var easing = [
                    'Linear', 'QuadraticIn', 'QuadraticOut', 'QuadraticInOut', 
                    'CubicIn', 'CubicOut', 'CubicInOut', 'QuarticIn', 'QuarticOut', 
                    'QuarticInOut', 'QuinticIn', 'QuinticOut', 'QuinticInOut',  'SinusoidalIn', 
                    'SinusoidalOut', 'SinusoidalInOut', 'ExponentialIn', 'ExponentialOut', 
                    'ExponentialInOut', 'CircularIn', 'CircularOut', 'CircularInOut', 
                    'ElasticIn', 'ElasticOut', 'ElasticInOut', 'BackIn', 'BackOut', 
                    'BackInOut', 'BounceIn', 'BounceOut', 'BounceInOut'
                    ][0]//[random(30)];

                var move = zr.animate(id, '');

                switch (type) {
                    case 0 :
                        move.when(time, {
                            scale : [random(3, 1), random(3, 1)]
                        });
                        break;
                    case 1 :
                        move.when(time, {
                            position : [random(w), random(h)]
                        });
                        break;
                    case 2 :
                        move.when(time, {
                            rotation : [pi * 2 * random(10, 1), 0, 0]
                        });
                        break;
                    case 3 : 
                        move = zr.animate(id, 'style').when(time, {
                            r : [random(100, 30)]
                        });
                        break;
                    case 4 : 
                        move = zr.animate(id, 'style').when(time, {
                            k : random(10)
                        });
                        break;
                    case 5 : 
                        move = zr.animate(id, 'style').when(time, {
                            n : random(5)
                        });
                        break;
                }

                move.done(function() {
                        animate(id, shape);
                    })
                    .start(easing);
            }
        })

        function random(max, min) {
            var min = min || 0;
            return Math.floor(Math.random() * (max - min)) % (max - min) + min;
        }
    </script>
    
</body>
</html>